<template>
	<view>
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">公告</block>
		</cu-custom>
		<view>
			<view class="cu-bar bg-white search fixed" :style="[{top:CustomBar + 'px'}]">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input type="text" placeholder="输入搜索的公告标题" v-model="title" confirm-type="search"></input>
				</view>
				<view class="action">
					<button class="cu-btn bg-gradual-green shadow-blur round" @click="notice()">搜索</button>
				</view>
			</view>
			<scroll-view scroll-y class="indexes" :scroll-into-view="'indexes-'+ listCurID" :style="[{height:'calc(100vh - '+ CustomBar + 'px - 50px)'}]"
			 :scroll-with-animation="true" :enable-back-to-top="true">
				<block>
					<view>
						<view class="padding-xl"></view>
						<view class="cu-list menu-avatar no-padding">
							<view class="cu-item" v-for="(item,index) in list" :key="index">
								<view class="cu-avatar bg-white round lg"><text class="cuIcon-notificationfill text-olive"></text></view>
								<view class="content">
									<view class="text-grey">{{item.title}}</view>
									<view class="text-gray text-sm">
										{{toDate(item.createtime)}}
									</view>

								</view>
								<button class="cu-btn bg-green shadow fr round" @tap="showModal" data-target="DialogModal1">
									<text @click="isCont(item.content)">查看</text>
								</button>

							</view>
						</view>
					</view>
				</block>
			</scroll-view>
		</view>
		<view class="cu-modal" :class="modalName=='DialogModal1'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">公告内容</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl" v-html="content">
					
				</view>
				<view class="cu-bar bg-white">
					<view class="action margin-0 flex-sub  solid-left" @tap="hideModal">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				modalName: null,
				CustomBar: this.CustomBar,
				list: [],
				listCurID: '',
				content: '',
				title:''
			}
		},
		onLoad() {
			this.notice()
		},

		methods: {
			// 公告
			notice: async function() {
				var that = this;
				let result = await that.$api.personnelnotice({
					title:that.title
				});
				if (result.code == 1) {
					that.list = result.data
				}else{
					that.list = null
				}
			},
			// 时间戳 to 时间
			toDate: function(time) {
				let date = this.$common.timeToDate(time);
				return date;
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			// 弹框
			isCont: async function(item) {
				//console.log('xx', item)
				this.content = item
			}
		}
	}
</script>

<style>
	.bg-null {
		background-color: #FFFFFF;
	}
</style>
